<!-- 客户详情-客户跟进记录-新建跟进记录组件 -->
<template>
  <a-modal
    width="45%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title>
      {{ type === 'add' ? '新增跟进记录' : '查看跟进记录详情' }}
    </template>
    <div>
      <a-form
        :model="form"
        ref="recordRef"
        :rules="type === 'add' ? rules : {}"
      >
        <a-form-item field="name" label="拜访客户：">
          {{ clientName }}
        </a-form-item>
        <a-form-item field="visitors" label="拜访联系人：">
          <a-input
            v-if="type === 'add'"
            v-model="form.visitors"
            placeholder="请输入拜访联系人"
          />
          <div v-else>
            {{ form.visitors }}
          </div>
        </a-form-item>
        <a-form-item field="followStateId" label="参与人：">
          <a-select
            placeholder="请选择参与人"
            multiple
            v-model="form.followStateId"
            v-if="type === 'add'"
          >
            <a-option
              v-for="item in PersonnelInfoData"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-option
            >
          </a-select>

          <div v-else>
            {{ form.personName.toString() }}
          </div>
        </a-form-item>
        <a-form-item field="communicateWay" label="沟通方式：">
          <a-radio-group
            :disabled="type === 'readOnly'"
            v-model="form.communicateWay"
          >
            <a-radio value="0">线上沟通</a-radio>
            <a-radio value="1">线下拜访</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          field="communicationTime"
          validate-trigger="change"
          label="沟通时间："
        >
          <a-range-picker
            showTime
            v-model="form.communicationTime"
            v-if="type === 'add'"
            value-format="x"
          />
          <div v-else>
            {{
              `${dayjs(Number(form.communicationTime.split(',')[0])).format(
                'YYYY-MM-DD HH:mm:ss'
              )} - ${dayjs(Number(form.communicationTime.split(',')[1])).format(
                'YYYY-MM-DD HH:mm:ss'
              )}`
            }}
          </div>
        </a-form-item>

        <a-form-item field="communicationMatters" label="沟通事项：">
          <a-textarea
            placeholder="请输入"
            v-if="type === 'add'"
            v-model="form.communicationMatters"
            allow-clear
          />
          <div v-else>
            {{ form.communicationMatters }}
          </div>
        </a-form-item>
        <a-form-item field="state" label="推进成效：">
          <a-steps
            @change="stateChange"
            :changeable="type === 'add'"
            small
            type="arrow"
            :current="form.state"
          >
            <a-step
              v-for="(item, index) in stateList"
              :key="index"
              :value="index"
            >
              {{ (item as any).name }}
            </a-step>
          </a-steps>
        </a-form-item>

        <a-form-item field="summary" label="跟进与维护总结：">
          <a-textarea
            v-if="type === 'add'"
            placeholder="请输入"
            v-model="form.summary"
            allow-clear
          />
          <div v-else>
            {{ form.summary }}
          </div>
        </a-form-item>
        <a-form-item field="communicateTime" label="下次跟进时间：">
          <a-date-picker
            v-if="type === 'add'"
            showTime
            value-format="x"
            v-model="form.nextFollowTime"
          />
          <div v-else>
            {{ dayjs(form.nextFollowTime).format('YYYY-MM-DD HH:mm:ss') }}
          </div>
        </a-form-item>

        <a-form-item field="nextFollowContent" label="下次跟进内容：">
          <a-textarea
            v-if="type === 'add'"
            placeholder="请输入"
            v-model="form.nextFollowContent"
            allow-clear
          />
          <div v-else>
            {{ form.nextFollowContent }}
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, Ref, watchEffect } from 'vue';
  import { IClientAddFollowRecord } from '@/types/order';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';
  import dayjs from 'dayjs';

  const props = withDefaults(
    defineProps<{
      visible: boolean; // 是否显示对话框
      clientName: string; // 客户名称
      stateList: []; // 状态列表
      formDetail: any; // 信息详情
      type: string; // 判断是新增还是查看详情, 类型为readOnly或者add
    }>(),
    {
      visible: false,
    }
  );

  // 获取销售负责人信息
  const PersonnelInfoData = ref();
  const GetPersonnelInfo = async () => {
    const res = await GetPersonnelinformation({ page: 1, size: 99999 });
    PersonnelInfoData.value = res.content.data;
  };
  GetPersonnelInfo();

  const emit = defineEmits(['update:visible', 'addRecordEmit']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const form: Ref<IClientAddFollowRecord> = computed(() => props.formDetail);
  // const form = reactive<IClientAddFollowRecord>({
  //   name: '', // 拜访客户名称
  //   visitors: '', // 拜访联系人
  //   personName: [], // 参与人
  //   communicateWay: '0', // 沟通方式， 0为线上沟通，1为线下拜访
  //   communicationTime: [], // 沟通时间
  //   communicationMatters: '', // 沟通事项
  //   state: 2,// 推进成效
  //   summary: '',// 跟进与维护总结
  //   nextFollowTime: 0,// 下次跟进时间
  //   nextFollowContent: '',// 下次跟进内容
  // });
  const rules = reactive({
    visitors: [
      {
        required: true,
        message: '请输入拜访客户',
      },
    ],
    followStateId: [
      {
        required: true,
        message: '请至少选择一个参与人',
      },
    ],
    communicateWay: [
      {
        required: true,
        message: '请选择沟通方式',
      },
    ],
    communicationTime: [
      {
        required: true,
        message: '请选择沟通时间',
      },
    ],
    communicationMatters: [
      {
        required: true,
        message: '请输入沟通事项',
      },
    ],
    state: [
      {
        required: true,
        message: '请选择推进成效',
      },
    ],
    summary: [
      {
        required: true,
        message: '请输入跟进与维护总结',
      },
    ],
  });

  let recordRef: any = ref(); // 储存modal的ref

  watchEffect(() => {
    if (modalVisible.value) {
      console.log(form.value);
    }
  });

  // 步骤条状态改变
  const stateChange = (step: number) => {
    form.value.state = step;
  };

  // 保存
  const handleOk = async () => {
    try {
      const res = await recordRef.value.validate();
      if (res === undefined) {
        form.value.communicationTime = form.value.communicationTime.join(',');
        modalVisible.value = false;
        emit('addRecordEmit', form.value);
      } else {
        modalVisible.value = true;
      }
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  watchEffect(() => {
    if (modalVisible.value && props.type !== 'add') {
      props.formDetail.state =
        props.stateList.findIndex(
          (item) => item.name === props.formDetail.effect
        ) + 1;
    }
  });
</script>

<style scoped lang="less"></style>
